[SecuritySolution] Dashboard listing UI #160540

angorayc · 2023-06-26T15:28:27Z

Summary

Align dashboard listing UI with Kibana dashboard.
Security Solution tags are selected by default and removable by users.

Prerequisite:
This PR is waiting for #160871 to be merged

Steps to verify:

Visit Security > Dashboards, and create a dashboard from this page.
Back to Security Dashboards page, you should see the dashboard you just created and Security Solution tag should be selected by default in the tag filters.
Open the tag options, click the Security Solution tag. Observe that it should be removable, and it should display all the dashboards you have in the table.

Known issues:
#160540 (comment)

Before:

After:

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios

angorayc · 2023-06-26T15:32:15Z

packages/content-management/table_list_view_table/src/components/use_tag_filter_panel.tsx

+  const totalActiveFilters = useMemo(
+    () =>
+      Object.keys(tagSelection).reduce((acc, currentOption) => {
+        const inTagReferences = tagReferences?.find((ref) => ref.name === currentOption);
+        acc +=
+          inTagReferences != null
+            ? tagReferences?.filter((ref) => ref.name === currentOption).length ?? 0
+            : 1;
+        return acc;
+      }, 0),
+    [tagReferences, tagSelection]
+  );


This is to fix this scenario: (When more than one tags with the same name exist, it show the count as 1, expected to be 2)

packages/content-management/table_list_view_table/src/components/table.tsx

elasticmachine · 2023-06-27T08:33:50Z

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

elasticmachine · 2023-06-27T08:33:52Z

Pinging @elastic/security-solution (Team: SecuritySolution)

sebelga

Thanks for working on this @angorayc

I am sorry but I need to push back changes related to "layout". You've added 3 new props for it:

withPageTemplateHeader
restrictPageSectionWidth
pageSectionPadding

which are all related to changes in layout.

Since #157988 there is a <TableListViewTable /> that is exposed and only contains the Table which seems to be what you need.

It would probably means that the DashboardListing should be refactored to only export the Table for Dashboard as well.

If you want we can discuss over Zoom 👍

sebelga

Left some comments

packages/content-management/table_list_view_table/src/services.tsx

packages/content-management/table_list_view_table/src/table_list_view_table.tsx

src/plugins/saved_objects_tagging_oss/public/api.ts

…fix'

…ashboard-listing

sebelga · 2023-07-03T09:10:45Z

src/plugins/dashboard/public/dashboard_listing/dashboard_listing_table.tsx

+            http,
+          },
+          toMountPoint,
+          savedObjectsTagging: savedObjectsTagging.hasApi // TODO: clean up this logic once https://github.com/elastic/kibana/issues/140433 is resolved


We need to put the changes (useMemo) I made to fix the tag list issue in Dashboard:
https://github.com/elastic/kibana/pull/160871/files#diff-aecc9bdefcbb1074958f2f7865f975e30c2b6cb24ca907c836df1596a04190ebR209

sebelga

Start to look good! 👍 One more change from my side to fix a big with the tag list. Cheers

src/plugins/dashboard/public/dashboard_listing/hooks/use_dashboard_listing_table.tsx

src/plugins/dashboard/public/dashboard_listing/dashboard_listing_table.tsx

ThomThomson

Presentation team changes LGTM! I tested locally and by looking through the code, and everything is working great! Nice work with splitting the Listing up into two components.

One thing that I noticed is that the Security Dashboard listing page has two Create dashboard buttons - is this expected?

Also left one small nit about the jest testing.

ThomThomson · 2023-07-04T18:55:08Z

src/plugins/dashboard/public/dashboard_listing/hooks/use_dashboard_listing_table.test.tsx

+  },
+}));
+
+const mockGetServices = {


nit: some of these services look like stubs which should already be filled out by our stubs in src/plugins/dashboard/jest_setup.ts. Usually we only override services like this when we need to test a particular behaviour - and in that case it's actually possible to simply override the stub function.

For instance, the default stub for the dashboardSessionStorage.getDashboardIdsWithUnsavedChanges service defined here: src/plugins/dashboard/public/services/dashboard_session_storage/dashboard_session_storage.stub.ts returns two dashboards. If you wanted to test what happens if it returns three you could just do

pluginServices.getServices().dashboardSessionStorage.getDashboardIdsWithUnsavedChanges = jest.fn().mockReturnValue([ 'one', 'two', 'three' ]);

In this way we can avoid having to restate all required services for every test. This isn't blocking though, would just help the test be a little less verbose!

We have an existing create dashboard button on the page and a new one in dashboard listing. I'll leave it as it is at the moment, as users might have used to the position of the existing button.

I've also updated the unit test and re-use the existing mocks. Thanks for the tips @ThomThomson !

sebelga

LGTM! 👍 Thanks for the patience and making those changes @angorayc !

machadoum · 2023-07-20T09:36:59Z

src/plugins/dashboard/public/dashboard_listing/dashboard_listing_table.tsx

+
+  const savedObjectsTaggingFakePlugin = useMemo(
+    () =>
+      savedObjectsTagging.hasApi // TODO: clean up this logic once https://github.com/elastic/kibana/issues/140433 is resolved


Issue 140433 is closed. Is this comment outdated?

It's coming from https://github.com/elastic/kibana/pull/160540/files#diff-aecc9bdefcbb1074958f2f7865f975e30c2b6cb24ca907c836df1596a04190ebR62

@ThomThomson Should we remove the comment?

Nope, this comment is still valid - the linked issue is just the wrong way to solve it!

src/plugins/dashboard/public/dashboard_listing/dashboard_listing_table.tsx

x-pack/plugins/security_solution/public/dashboards/pages/landing_page/index.tsx

machadoum · 2023-07-20T10:38:56Z

nit: I noticed it takes some seconds for the Dashboards table to load. Having a loading state/skeleton might be helpful for the user so they know that something is still loading.

Jul-20-2023.12-18-42.mov

I also noticed that the new tag never gets loaded when the know issue happens and you navigate using the menu.

Jul-20-2023.12-25-24.mov

When I create a new dashboard it also doesn't show up:

new.dashboard.is.hidden.mov

The tag count is also wrong to me...

Am I doing something wrong? 🤔

kibana-ci · 2023-07-24T11:46:05Z

💚 Build Succeeded

Buildkite Build
Commit: c0ffaea

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`dashboard`	384	386	+2
`securitySolution`	4314	4311	-3
total			-1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`dashboard`	355.7KB	358.2KB	+2.5KB
`securitySolution`	9.8MB	9.8MB	-1.3KB
total			+1.2KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`dashboard`	42.4KB	42.4KB	+13.0B

Unknown metric groups

async chunk count

id	before	after	diff
`dashboard`	11	12	+1

ESLint disabled line counts

id	before	after	diff
`dashboard`	7	8	+1

Total ESLint disabled count

id	before	after	diff
`dashboard`	7	8	+1

History

💛 Build #143116 was flaky 2afacc4
💔 Build #143076 failed cad6053
💔 Build #140338 failed 34ba502
💛 Build #139470 was flaky d6e2435
💔 Build #139449 failed cbc4b7d
💔 Build #139440 failed 448ee22

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

angorayc · 2023-07-24T12:20:25Z

@machadoum , thank you so much for testing this PR. I've added a loading icon and implemented the recommended solution of #160723. Please have another try and see if it still happening, thanks again!

machadoum

I tried it out once more and it's working splendidly. Thank you, @angorayc!

## Summary 1. Align dashboard listing UI with Kibana dashboard. 2. `Security Solution` tags are selected by default and removable by users. **Prerequisite:** This PR is waiting for elastic#160871 to be merged **Steps to verify:** 1. Visit Security > Dashboards, and create a dashboard from this page. 2. Back to Security Dashboards page, you should see the dashboard you just created and Security Solution tag should be selected by default in the tag filters. 3. Open the tag options, click the Security Solution tag. Observe that it should be removable, and it should display all the dashboards you have in the table. **Known issues:** elastic#160540 (comment) **Before:** <img width="2545" alt="Screenshot 2023-06-27 at 09 24 19" src="https://github.com/elastic/kibana/assets/6295984/bc0fa0b1-96ad-43b0-afc1-48444dfb5691"> **After:** <img width="2543" alt="Screenshot 2023-06-27 at 09 22 21" src="https://github.com/elastic/kibana/assets/6295984/82d0a868-bda2-431f-b0b5-9cbc34d3ae71"> ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Pablo Neves Machado <[email protected]>

angorayc · 2023-08-24T16:58:35Z

#164476

angorayc added 5 commits June 26, 2023 10:42

replace dashboard listing

716fd81

styling

071dfb7

add fixed tag

eb41945

disable actions

aac6c3c

default selected tags

df89974

angorayc mentioned this pull request Jun 26, 2023

[SecuritySolution] Replace dashboard listing with Kibana dashboard listing #155716

Closed

3 tasks

angorayc commented Jun 26, 2023

View reviewed changes

fix tag types

3fa5710

angorayc commented Jun 26, 2023

View reviewed changes

packages/content-management/table_list_view_table/src/components/table.tsx Outdated Show resolved Hide resolved

angorayc changed the title ~~Dashboard listing~~ [SecuritySolution] Dashboard listing UI Jun 27, 2023

angorayc marked this pull request as ready for review June 27, 2023 08:33

angorayc requested review from a team as code owners June 27, 2023 08:33

angorayc mentioned this pull request Jun 27, 2023

[Portable Dashboard] Allow for Non-Removable Tags in Portable Dashboard Listing Page #155089

Closed

sebelga requested changes Jun 27, 2023

View reviewed changes

sebelga reviewed Jun 27, 2023

View reviewed changes

kibanamachine and others added 4 commits June 27, 2023 17:30

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

93237cd

…fix'

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

a08e4ce

…fix'

fix types

ce5e867

unit tests

59a293d

angorayc added 3 commits June 30, 2023 14:33

types

20d1511

Merge branch 'dashboard-listing' of github.com:angorayc/kibana into d…

cbc4b7d

…ashboard-listing

test

d6e2435

sebelga reviewed Jul 3, 2023

View reviewed changes

sebelga requested changes Jul 3, 2023

View reviewed changes

semd reviewed Jul 3, 2023

View reviewed changes

src/plugins/dashboard/public/dashboard_listing/hooks/use_dashboard_listing_table.tsx Outdated Show resolved Hide resolved

semd reviewed Jul 3, 2023

View reviewed changes

src/plugins/dashboard/public/dashboard_listing/hooks/use_dashboard_listing_table.tsx Show resolved Hide resolved

semd reviewed Jul 3, 2023

View reviewed changes

src/plugins/dashboard/public/dashboard_listing/dashboard_listing_table.tsx Outdated Show resolved Hide resolved

ThomThomson approved these changes Jul 4, 2023

View reviewed changes

machadoum and others added 4 commits July 5, 2023 16:52

Implement review sugestions

34ba502

Merge branch 'main' into dashboard-listing

cad6053

review

59bd25a

review

2afacc4

sebelga approved these changes Jul 19, 2023

View reviewed changes

angorayc added the needs_docs label Jul 19, 2023

machadoum reviewed Jul 20, 2023

View reviewed changes

angorayc added 4 commits July 24, 2023 09:32

Merge branch 'main' of github.com:elastic/kibana into dashboard-listing

93ee16a

use savedObjectsTagging client

df1000c

unit test

5b028b0

review

c0ffaea

machadoum approved these changes Jul 24, 2023

View reviewed changes

angorayc added the backport:skip This commit does not require backporting label Jul 24, 2023

angorayc merged commit 50a9e13 into elastic:main Jul 24, 2023

joepeeples mentioned this pull request Jul 25, 2023

Dashboard landing page: filters for custom dashboards elastic/security-docs#3620

Closed

angorayc mentioned this pull request Aug 31, 2023

[Security Solution] Create Dashboard view page #152955

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SecuritySolution] Dashboard listing UI #160540

[SecuritySolution] Dashboard listing UI #160540

angorayc commented Jun 26, 2023 •

edited

Loading

angorayc Jun 26, 2023 •

edited

Loading

elasticmachine commented Jun 27, 2023

elasticmachine commented Jun 27, 2023

sebelga left a comment

sebelga left a comment

sebelga Jul 3, 2023 •

edited

Loading

sebelga left a comment

ThomThomson left a comment

ThomThomson Jul 4, 2023

angorayc Jul 18, 2023

sebelga left a comment

machadoum Jul 20, 2023

angorayc Jul 24, 2023

ThomThomson Jul 24, 2023

machadoum commented Jul 20, 2023

kibana-ci commented Jul 24, 2023

async chunk count

ESLint disabled line counts

Total ESLint disabled count

angorayc commented Jul 24, 2023

machadoum left a comment

angorayc commented Aug 24, 2023

[SecuritySolution] Dashboard listing UI #160540

[SecuritySolution] Dashboard listing UI #160540

Conversation

angorayc commented Jun 26, 2023 • edited Loading

Summary

Checklist

angorayc Jun 26, 2023 • edited Loading

Choose a reason for hiding this comment

elasticmachine commented Jun 27, 2023

elasticmachine commented Jun 27, 2023

sebelga left a comment

Choose a reason for hiding this comment

sebelga left a comment

Choose a reason for hiding this comment

sebelga Jul 3, 2023 • edited Loading

Choose a reason for hiding this comment

sebelga left a comment

Choose a reason for hiding this comment

ThomThomson left a comment

Choose a reason for hiding this comment

ThomThomson Jul 4, 2023

Choose a reason for hiding this comment

angorayc Jul 18, 2023

Choose a reason for hiding this comment

sebelga left a comment

Choose a reason for hiding this comment

machadoum Jul 20, 2023

Choose a reason for hiding this comment

angorayc Jul 24, 2023

Choose a reason for hiding this comment

ThomThomson Jul 24, 2023

Choose a reason for hiding this comment

machadoum commented Jul 20, 2023

kibana-ci commented Jul 24, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

async chunk count

ESLint disabled line counts

Total ESLint disabled count

History

angorayc commented Jul 24, 2023

machadoum left a comment

Choose a reason for hiding this comment

angorayc commented Aug 24, 2023

angorayc commented Jun 26, 2023 •

edited

Loading

angorayc Jun 26, 2023 •

edited

Loading

sebelga Jul 3, 2023 •

edited

Loading